<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="description" content="Description">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/buuing/docsify-theme-blue/index.css" />
  <style>
    /* 引入字体 */
    @font-face {
      font-family: "myFont";
      src: url(./docs/MONACO.TTF);
    }
    * {
      font-family: myFont,Source Sans Pro,Helvetica Neue,Arial,sans-serif !important;
    }
  </style>
</head>
<body>
  <style>
    .mini-sandbox {
      margin: 20px 0;
      border: 2px solid #b9d2ff;
      border-radius: 5px;
      box-shadow: 0 2px 12px 0 rgba(94, 144, 232, 0.5);
    }
  </style>
  <div id="app"></div>
  <script>
    window.$docsify = {
      name: '',
      repo: 'buuing/mini-sandbox',
      // 自定义侧边栏
      loadSidebar: true,
      // 抓取目录渲染
      maxLevel: 3,
      subMaxLevel: 3,
      // 开启封面页
      coverpage: false,
      // 切换页面后跳到顶部
      auto2top: true,
      // 路由
      alias: {
        '/.*/_sidebar.md': '/_sidebar.md',
      },
      executeScript: true,
      plugins: [
        function(hook) {
          hook.afterEach(function(html, next) {
            next(html.replace(/\^\^\^/gm, (res, ...arg) => '```'))
          })
        },
        function(hook) {
          hook.beforeEach(function(content) {
            return content.replace(/\$\{version\}/gm, (res, ...arg) => '0.3.4')
          })
        },
        function(hook) {
          let arr = []
          hook.beforeEach(function(content) {
            arr = []
            content.replace(/<script type\=\"text\/javascript\">(.*?)<\/script>\n```/gms, (res, script) => {
              arr.push(script)
            })
          })
          hook.afterEach(function(html, next) {
            if (!arr.length) return next(html)
            const scriptStr = `\n<script>\n${arr.join('\n')}\n<\/script>\n`
            next(html + scriptStr)
          })
        },
      ],
      // 全局默认配置
      sandboxOptions: {
        defaultConfig: {
          height: '300px',
          autoRun: true,
        },
      },
    }

    // sandbox 配置项
    window.Demo1Config = {
      css: `
        .box {
          width: 100px;
          height: 100px;
          background: green;
          position: absolute;
        }
      `,
      js: `
        const box = document.querySelector('div')
        setInterval(() => {
          const left = Math.sin(Date.now() / 500) * 100 + 100
          box.style.left = left + 'px'
        }, 1000 / 60)
      `
    }

  </script>
  <!-- Docsify v4 -->
  <script src="./docs/docsify.js"></script>
  <script src="./docs/prism-bash.js"></script>

  <!-- 下面的用于本地开发 -->
  <!-- <script src="./dist/index.umd.js"></script>
  <script src="./dist/docsify-plugin.js"></script>
  <script src="./dist/vue-loader.js"></script>
  <script src="./dist/react-loader.js"></script> -->

  <!-- 下面的用于线上 -->
  <script src="https://cdn.jsdelivr.net/npm/mini-sandbox@0.3.4"></script>
  <script src="https://cdn.jsdelivr.net/npm/mini-sandbox@0.3.4/dist/docsify-plugin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mini-sandbox@0.3.4/dist/vue-loader.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/mini-sandbox@0.3.4/dist/react-loader.js"></script>
</body>
</html>
